.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #f8f9fa;
}

.sun-loading {
  position: relative;
  width: 300px;
  height: 300px;
}

.sun-loading .sun {
  position: absolute;
  top: 135px;
  left: calc(50% - 136px / 2);
  width: 136px;
  height: 136px;
  animation: sun 2.7s linear infinite;
}

.sun-loading .sun .sun-body {
  position: absolute;
  top: 18px;
  left: 18px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 6px solid #343a40;
  animation: sun-body 2.7s linear infinite;
}

.sun-loading .sun .sun-body .line {
  position: absolute;
  top: -24px;
  left: calc(50% - 3px);
  width: 6px;
  height: 12px;
  border-radius: 6px;
  background-color: #ffc107;
  transform-origin: center 68px;
}

.sun-loading .sun .eye {
  position: absolute;
  top: 60px;
  left: 40px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #17a2b8;
  box-shadow: 16px 0 #17a2b8;
  animation: eye 2.7s linear infinite;
}

.sun-loading .horizon {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 115px;
  background-color: #f8f9fa;
}

.sun-loading .horizon::before {
  content: '';
  position: absolute;
  left: 5%;
  width: 90%;
  height: 6px;
  border-radius: 6px;
  background-color: #343a40;
}

.sun-loading .horizon::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  left: 5px;
  content: 'loading...';
  position: absolute;
  top: 20px;
  width: 100%;
  text-align: center;
  font-size: 25px;
  color: #343a40;
  animation: loading 2.7s linear infinite;
}

@keyframes sun {
  10% {
    transform: translate(0);
  }
  40%,
  70% {
    transform: translateY(-40px);
  }
}

@keyframes sun-body {
  40% {
    transform: rotate(0);
  }
  50%,
  100% {
    transform: rotate(45deg);
  }
}

@keyframes eye {
  50%,
  60% {
    transform: scale(1);
  }
  55% {
    transform: scaleY(0.1);
  }
  70%,
  100% {
    transform: translateX(34px);
  }
}

@keyframes loading {
  40% {
    opacity: 1;
  }
  60% {
    opacity: 0;
  }
}
